<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iconfont Demo</title>
        <link
            rel="shortcut icon"
            href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
            type="image/x-icon"
        />
        <link
            rel="icon"
            type="image/svg+xml"
            href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"
        />
        <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
        <link rel="stylesheet" href="demo.css" />
        <link rel="stylesheet" href="iconfont.css" />
        <script src="iconfont.js"></script>
        <!-- jQuery -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
        <!-- 代码高亮 -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
        <style>
            .main .logo {
                margin-top: 0;
                height: auto;
            }

            .main .logo a {
                display: flex;
                align-items: center;
            }

            .main .logo .sub-title {
                margin-left: 0.5em;
                font-size: 22px;
                color: #fff;
                background: linear-gradient(-45deg, #3967ff, #b500fe);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <h1 class="logo"
                ><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
                    <img
                        width="200"
                        src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
                    /> </a
            ></h1>
            <div class="nav-tabs">
                <ul id="tabs" class="dib-box">
                    <li class="dib active"><span>Unicode</span></li>
                    <li class="dib"><span>Font class</span></li>
                    <li class="dib"><span>Symbol</span></li>
                </ul>

                <a
                    href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3295834"
                    target="_blank"
                    class="nav-more"
                    >查看项目</a
                >
            </div>
            <div class="tab-container">
                <div class="content unicode" style="display: block">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont">&#xe73c;</span>
                            <div class="name">file</div>
                            <div class="code-name">&amp;#xe73c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe739;</span>
                            <div class="name">review</div>
                            <div class="code-name">&amp;#xe739;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe73a;</span>
                            <div class="name">download</div>
                            <div class="code-name">&amp;#xe73a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe73b;</span>
                            <div class="name">open</div>
                            <div class="code-name">&amp;#xe73b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61b;</span>
                            <div class="name">polyline</div>
                            <div class="code-name">&amp;#xe61b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe617;</span>
                            <div class="name">ai</div>
                            <div class="code-name">&amp;#xe617;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe618;</span>
                            <div class="name">rect</div>
                            <div class="code-name">&amp;#xe618;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe619;</span>
                            <div class="name">edit</div>
                            <div class="code-name">&amp;#xe619;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe61a;</span>
                            <div class="name">polygon</div>
                            <div class="code-name">&amp;#xe61a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe735;</span>
                            <div class="name">link</div>
                            <div class="code-name">&amp;#xe735;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe736;</span>
                            <div class="name">cube</div>
                            <div class="code-name">&amp;#xe736;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe737;</span>
                            <div class="name">loading </div>
                            <div class="code-name">&amp;#xe737;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe738;</span>
                            <div class="name">model</div>
                            <div class="code-name">&amp;#xe738;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe732;</span>
                            <div class="name">folding</div>
                            <div class="code-name">&amp;#xe732;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe731;</span>
                            <div class="name">right</div>
                            <div class="code-name">&amp;#xe731;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe730;</span>
                            <div class="name">left</div>
                            <div class="code-name">&amp;#xe730;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe72f;</span>
                            <div class="name">hidden</div>
                            <div class="code-name">&amp;#xe72f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe72e;</span>
                            <div class="name">an-an</div>
                            <div class="code-name">&amp;#xe72e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe72d;</span>
                            <div class="name">more</div>
                            <div class="code-name">&amp;#xe72d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe72c;</span>
                            <div class="name">Auxiliary line</div>
                            <div class="code-name">&amp;#xe72c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe72b;</span>
                            <div class="name">target</div>
                            <div class="code-name">&amp;#xe72b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe726;</span>
                            <div class="name">cube</div>
                            <div class="code-name">&amp;#xe726;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe727;</span>
                            <div class="name">The standard frame</div>
                            <div class="code-name">&amp;#xe727;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe71f;</span>
                            <div class="name">view</div>
                            <div class="code-name">&amp;#xe71f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe721;</span>
                            <div class="name">delete</div>
                            <div class="code-name">&amp;#xe721;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe722;</span>
                            <div class="name">Edit the label</div>
                            <div class="code-name">&amp;#xe722;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe724;</span>
                            <div class="name">screening</div>
                            <div class="code-name">&amp;#xe724;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe71b;</span>
                            <div class="name">notation-tool</div>
                            <div class="code-name">&amp;#xe71b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe71c;</span>
                            <div class="name">Add a notation</div>
                            <div class="code-name">&amp;#xe71c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe71d;</span>
                            <div class="name">Have been added</div>
                            <div class="code-name">&amp;#xe71d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe71e;</span>
                            <div class="name">Notes - list</div>
                            <div class="code-name">&amp;#xe71e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe71a;</span>
                            <div class="name">remind</div>
                            <div class="code-name">&amp;#xe71a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe714;</span>
                            <div class="name">Left rotation</div>
                            <div class="code-name">&amp;#xe714;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe715;</span>
                            <div class="name">Right rotation</div>
                            <div class="code-name">&amp;#xe715;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe718;</span>
                            <div class="name">up</div>
                            <div class="code-name">&amp;#xe718;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe719;</span>
                            <div class="name">down</div>
                            <div class="code-name">&amp;#xe719;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe713;</span>
                            <div class="name">an-right</div>
                            <div class="code-name">&amp;#xe713;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe712;</span>
                            <div class="name">Pack up</div>
                            <div class="code-name">&amp;#xe712;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe70e;</span>
                            <div class="name">tool</div>
                            <div class="code-name">&amp;#xe70e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe70f;</span>
                            <div class="name">move</div>
                            <div class="code-name">&amp;#xe70f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe710;</span>
                            <div class="name">rotating</div>
                            <div class="code-name">&amp;#xe710;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe711;</span>
                            <div class="name">mapping</div>
                            <div class="code-name">&amp;#xe711;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe70b;</span>
                            <div class="name">information</div>
                            <div class="code-name">&amp;#xe70b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe70c;</span>
                            <div class="name">According to</div>
                            <div class="code-name">&amp;#xe70c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe709;</span>
                            <div class="name">submit</div>
                            <div class="code-name">&amp;#xe709;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe708;</span>
                            <div class="name">hang up</div>
                            <div class="code-name">&amp;#xe708;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe706;</span>
                            <div class="name">Exit full screen</div>
                            <div class="code-name">&amp;#xe706;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe705;</span>
                            <div class="name">Full screen</div>
                            <div class="code-name">&amp;#xe705;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe704;</span>
                            <div class="name">help</div>
                            <div class="code-name">&amp;#xe704;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe703;</span>
                            <div class="name">save</div>
                            <div class="code-name">&amp;#xe703;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe702;</span>
                            <div class="name">Work flow</div>
                            <div class="code-name">&amp;#xe702;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe701;</span>
                            <div class="name">Expiration time</div>
                            <div class="code-name">&amp;#xe701;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6fe;</span>
                            <div class="name">Job information</div>
                            <div class="code-name">&amp;#xe6fe;</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="unicode-">Unicode 引用</h2>
                        <hr />

                        <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                        <ul>
                            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
                        </ul>
                        <blockquote>
                            <p
                                >注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                                引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p
                            >
                        </blockquote>
                        <p>Unicode 使用步骤如下：</p>
                        <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                        <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1659510737631') format('woff2'),
       url('iconfont.woff?t=1659510737631') format('woff'),
       url('iconfont.ttf?t=1659510737631') format('truetype');
}
</code></pre>
                        <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                        <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                        <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p
                                >"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是
                                "iconfont"。</p
                            >
                        </blockquote>
                    </div>
                </div>
                <div class="content font-class">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont icon-file"></span>
                            <div class="name"> file </div>
                            <div class="code-name">.icon-file </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-review"></span>
                            <div class="name"> review </div>
                            <div class="code-name">.icon-review </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-download"></span>
                            <div class="name"> download </div>
                            <div class="code-name">.icon-download </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-open"></span>
                            <div class="name"> open </div>
                            <div class="code-name">.icon-open </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-polyline"></span>
                            <div class="name"> polyline </div>
                            <div class="code-name">.icon-polyline </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-ai"></span>
                            <div class="name"> ai </div>
                            <div class="code-name">.icon-ai </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-rect"></span>
                            <div class="name"> rect </div>
                            <div class="code-name">.icon-rect </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-edit"></span>
                            <div class="name"> edit </div>
                            <div class="code-name">.icon-edit </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-polygon"></span>
                            <div class="name"> polygon </div>
                            <div class="code-name">.icon-polygon </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-Frame"></span>
                            <div class="name"> link </div>
                            <div class="code-name">.icon-Frame </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-122"></span>
                            <div class="name"> cube </div>
                            <div class="code-name">.icon-a-122 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-loading"></span>
                            <div class="name"> loading </div>
                            <div class="code-name">.icon-loading </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-Vector"></span>
                            <div class="name"> model </div>
                            <div class="code-name">.icon-Vector </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-dakai"></span>
                            <div class="name"> folding </div>
                            <div class="code-name">.icon-dakai </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-right"></span>
                            <div class="name"> right </div>
                            <div class="code-name">.icon-right </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-zu25265"></span>
                            <div class="name"> left </div>
                            <div class="code-name">.icon-a-zu25265 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-zu25263"></span>
                            <div class="name"> hidden </div>
                            <div class="code-name">.icon-a-zu25263 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-zu25262"></span>
                            <div class="name"> an-an </div>
                            <div class="code-name">.icon-a-zu25262 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-gengduoicon"></span>
                            <div class="name"> more </div>
                            <div class="code-name">.icon-gengduoicon </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-fuzhuxian"></span>
                            <div class="name"> Auxiliary line </div>
                            <div class="code-name">.icon-fuzhuxian </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-mubiao"></span>
                            <div class="name"> target </div>
                            <div class="code-name">.icon-mubiao </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-lifangti"></span>
                            <div class="name"> cube </div>
                            <div class="code-name">.icon-lifangti </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-biaozhunkuang"></span>
                            <div class="name"> The standard frame </div>
                            <div class="code-name">.icon-biaozhunkuang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yanjing"></span>
                            <div class="name"> view </div>
                            <div class="code-name">.icon-yanjing </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shanchuicon"></span>
                            <div class="name"> delete </div>
                            <div class="code-name">.icon-shanchuicon </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-bianjibiaoqian"></span>
                            <div class="name"> Edit the label </div>
                            <div class="code-name">.icon-bianjibiaoqian </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shaixuan"></span>
                            <div class="name"> screening </div>
                            <div class="code-name">.icon-shaixuan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-pizhuicon"></span>
                            <div class="name"> notation-tool </div>
                            <div class="code-name">.icon-pizhuicon </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tianjiapizhu"></span>
                            <div class="name"> Add a notation </div>
                            <div class="code-name">.icon-tianjiapizhu </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yitianjia"></span>
                            <div class="name"> Have been added </div>
                            <div class="code-name">.icon-yitianjia </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-pizhu"></span>
                            <div class="name"> Notes - list </div>
                            <div class="code-name">.icon-pizhu </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tixing"></span>
                            <div class="name"> remind </div>
                            <div class="code-name">.icon-tixing </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-zuoxuanze"></span>
                            <div class="name"> Left rotation </div>
                            <div class="code-name">.icon-zuoxuanze </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-youxuanzhuan"></span>
                            <div class="name"> Right rotation </div>
                            <div class="code-name">.icon-youxuanzhuan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shang"></span>
                            <div class="name"> up </div>
                            <div class="code-name">.icon-shang </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xia"></span>
                            <div class="name"> down </div>
                            <div class="code-name">.icon-xia </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-zhankai1"></span>
                            <div class="name"> an-right </div>
                            <div class="code-name">.icon-zhankai1 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-shouqi"></span>
                            <div class="name"> Pack up </div>
                            <div class="code-name">.icon-shouqi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-gongju"></span>
                            <div class="name"> tool </div>
                            <div class="code-name">.icon-gongju </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yidong"></span>
                            <div class="name"> move </div>
                            <div class="code-name">.icon-yidong </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xuanzhuan"></span>
                            <div class="name"> rotating </div>
                            <div class="code-name">.icon-xuanzhuan </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-yingshe"></span>
                            <div class="name"> mapping </div>
                            <div class="code-name">.icon-yingshe </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xinxi"></span>
                            <div class="name"> information </div>
                            <div class="code-name">.icon-xinxi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-xianshi"></span>
                            <div class="name"> According to </div>
                            <div class="code-name">.icon-xianshi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tijiao"></span>
                            <div class="name"> submit </div>
                            <div class="code-name">.icon-tijiao </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-guaqi"></span>
                            <div class="name"> hang up </div>
                            <div class="code-name">.icon-guaqi </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-tuichuquanping"></span>
                            <div class="name"> Exit full screen </div>
                            <div class="code-name">.icon-tuichuquanping </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-Fullscreen"></span>
                            <div class="name"> Full screen </div>
                            <div class="code-name">.icon-a-Fullscreen </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-help"></span>
                            <div class="name"> help </div>
                            <div class="code-name">.icon-help </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-save"></span>
                            <div class="name"> save </div>
                            <div class="code-name">.icon-save </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-Workflow"></span>
                            <div class="name"> Work flow </div>
                            <div class="code-name">.icon-a-Workflow </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-lujing15750"></span>
                            <div class="name"> Expiration time </div>
                            <div class="code-name">.icon-a-lujing15750 </div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon-a-Jobinformation"></span>
                            <div class="name"> Job information </div>
                            <div class="code-name">.icon-a-Jobinformation </div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="font-class-">font-class 引用</h2>
                        <hr />

                        <p
                            >font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
                            书写不直观，语意不明确的问题。</p
                        >
                        <p>与 Unicode 使用方式相比，具有如下特点：</p>
                        <ul>
                            <li
                                >相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
                                是什么。</li
                            >
                            <li
                                >因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
                                里面的 Unicode 引用。</li
                            >
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                        <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p
                                >" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是
                                "iconfont"。</p
                            >
                        </blockquote>
                    </div>
                </div>
                <div class="content symbol">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-file"></use>
                            </svg>
                            <div class="name">file</div>
                            <div class="code-name">#icon-file</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-review"></use>
                            </svg>
                            <div class="name">review</div>
                            <div class="code-name">#icon-review</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-download"></use>
                            </svg>
                            <div class="name">download</div>
                            <div class="code-name">#icon-download</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-open"></use>
                            </svg>
                            <div class="name">open</div>
                            <div class="code-name">#icon-open</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-polyline"></use>
                            </svg>
                            <div class="name">polyline</div>
                            <div class="code-name">#icon-polyline</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-ai"></use>
                            </svg>
                            <div class="name">ai</div>
                            <div class="code-name">#icon-ai</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-rect"></use>
                            </svg>
                            <div class="name">rect</div>
                            <div class="code-name">#icon-rect</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-edit"></use>
                            </svg>
                            <div class="name">edit</div>
                            <div class="code-name">#icon-edit</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-polygon"></use>
                            </svg>
                            <div class="name">polygon</div>
                            <div class="code-name">#icon-polygon</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-Frame"></use>
                            </svg>
                            <div class="name">link</div>
                            <div class="code-name">#icon-Frame</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-122"></use>
                            </svg>
                            <div class="name">cube</div>
                            <div class="code-name">#icon-a-122</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-loading"></use>
                            </svg>
                            <div class="name">loading </div>
                            <div class="code-name">#icon-loading</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-Vector"></use>
                            </svg>
                            <div class="name">model</div>
                            <div class="code-name">#icon-Vector</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-dakai"></use>
                            </svg>
                            <div class="name">folding</div>
                            <div class="code-name">#icon-dakai</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-right"></use>
                            </svg>
                            <div class="name">right</div>
                            <div class="code-name">#icon-right</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-zu25265"></use>
                            </svg>
                            <div class="name">left</div>
                            <div class="code-name">#icon-a-zu25265</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-zu25263"></use>
                            </svg>
                            <div class="name">hidden</div>
                            <div class="code-name">#icon-a-zu25263</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-zu25262"></use>
                            </svg>
                            <div class="name">an-an</div>
                            <div class="code-name">#icon-a-zu25262</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-gengduoicon"></use>
                            </svg>
                            <div class="name">more</div>
                            <div class="code-name">#icon-gengduoicon</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-fuzhuxian"></use>
                            </svg>
                            <div class="name">Auxiliary line</div>
                            <div class="code-name">#icon-fuzhuxian</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-mubiao"></use>
                            </svg>
                            <div class="name">target</div>
                            <div class="code-name">#icon-mubiao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-lifangti"></use>
                            </svg>
                            <div class="name">cube</div>
                            <div class="code-name">#icon-lifangti</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-biaozhunkuang"></use>
                            </svg>
                            <div class="name">The standard frame</div>
                            <div class="code-name">#icon-biaozhunkuang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yanjing"></use>
                            </svg>
                            <div class="name">view</div>
                            <div class="code-name">#icon-yanjing</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchuicon"></use>
                            </svg>
                            <div class="name">delete</div>
                            <div class="code-name">#icon-shanchuicon</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-bianjibiaoqian"></use>
                            </svg>
                            <div class="name">Edit the label</div>
                            <div class="code-name">#icon-bianjibiaoqian</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shaixuan"></use>
                            </svg>
                            <div class="name">screening</div>
                            <div class="code-name">#icon-shaixuan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-pizhuicon"></use>
                            </svg>
                            <div class="name">notation-tool</div>
                            <div class="code-name">#icon-pizhuicon</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tianjiapizhu"></use>
                            </svg>
                            <div class="name">Add a notation</div>
                            <div class="code-name">#icon-tianjiapizhu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yitianjia"></use>
                            </svg>
                            <div class="name">Have been added</div>
                            <div class="code-name">#icon-yitianjia</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-pizhu"></use>
                            </svg>
                            <div class="name">Notes - list</div>
                            <div class="code-name">#icon-pizhu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tixing"></use>
                            </svg>
                            <div class="name">remind</div>
                            <div class="code-name">#icon-tixing</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-zuoxuanze"></use>
                            </svg>
                            <div class="name">Left rotation</div>
                            <div class="code-name">#icon-zuoxuanze</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-youxuanzhuan"></use>
                            </svg>
                            <div class="name">Right rotation</div>
                            <div class="code-name">#icon-youxuanzhuan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shang"></use>
                            </svg>
                            <div class="name">up</div>
                            <div class="code-name">#icon-shang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xia"></use>
                            </svg>
                            <div class="name">down</div>
                            <div class="code-name">#icon-xia</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-zhankai1"></use>
                            </svg>
                            <div class="name">an-right</div>
                            <div class="code-name">#icon-zhankai1</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-shouqi"></use>
                            </svg>
                            <div class="name">Pack up</div>
                            <div class="code-name">#icon-shouqi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-gongju"></use>
                            </svg>
                            <div class="name">tool</div>
                            <div class="code-name">#icon-gongju</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yidong"></use>
                            </svg>
                            <div class="name">move</div>
                            <div class="code-name">#icon-yidong</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xuanzhuan"></use>
                            </svg>
                            <div class="name">rotating</div>
                            <div class="code-name">#icon-xuanzhuan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-yingshe"></use>
                            </svg>
                            <div class="name">mapping</div>
                            <div class="code-name">#icon-yingshe</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xinxi"></use>
                            </svg>
                            <div class="name">information</div>
                            <div class="code-name">#icon-xinxi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xianshi"></use>
                            </svg>
                            <div class="name">According to</div>
                            <div class="code-name">#icon-xianshi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tijiao"></use>
                            </svg>
                            <div class="name">submit</div>
                            <div class="code-name">#icon-tijiao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-guaqi"></use>
                            </svg>
                            <div class="name">hang up</div>
                            <div class="code-name">#icon-guaqi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-tuichuquanping"></use>
                            </svg>
                            <div class="name">Exit full screen</div>
                            <div class="code-name">#icon-tuichuquanping</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-Fullscreen"></use>
                            </svg>
                            <div class="name">Full screen</div>
                            <div class="code-name">#icon-a-Fullscreen</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-help"></use>
                            </svg>
                            <div class="name">help</div>
                            <div class="code-name">#icon-help</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-save"></use>
                            </svg>
                            <div class="name">save</div>
                            <div class="code-name">#icon-save</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-Workflow"></use>
                            </svg>
                            <div class="name">Work flow</div>
                            <div class="code-name">#icon-a-Workflow</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-lujing15750"></use>
                            </svg>
                            <div class="name">Expiration time</div>
                            <div class="code-name">#icon-a-lujing15750</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-a-Jobinformation"></use>
                            </svg>
                            <div class="name">Job information</div>
                            <div class="code-name">#icon-a-Jobinformation</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="symbol-">Symbol 引用</h2>
                        <hr />

                        <p
                            >这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
                                href=""
                                >文章</a
                            >
                            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p
                        >
                        <ul>
                            <li>支持多色图标了，不再受单色限制。</li>
                            <li
                                >通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
                                <code>color</code> 来调整样式。</li
                            >
                            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                        <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                        <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                        <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('.tab-container .content:first').show();

                $('#tabs li').click(function (e) {
                    var tabContent = $('.tab-container .content');
                    var index = $(this).index();

                    if ($(this).hasClass('active')) {
                        return;
                    } else {
                        $('#tabs li').removeClass('active');
                        $(this).addClass('active');

                        tabContent.hide().eq(index).fadeIn();
                    }
                });
            });
        </script>
    </body>
</html>
